<template>
  <template v-if="url">
    <div class="image_box">
      <el-image :src="url" fit="cover" class="image">
        <template #error>
          <el-icon>
            <icon-picture />
          </el-icon>
        </template>
      </el-image>
      <div v-if="!['2','3','4'].includes(status)" class="msk_box" @mouseenter="mskVisible = true"
        @mouseleave="mskVisible = false">
        <el-icon v-if="mskVisible" @click="onDelete">
          <delete />
        </el-icon>
      </div>
    </div>
  </template>
  <el-upload v-else action="" accept=".jpg,.JPG,.jpeg,.JPEG,.png,.PNG" :show-file-list="false" :auto-upload="false"
    :on-change="handleChange">
    <div class="btn_box">
      <el-icon>
        <Plus />
      </el-icon>
    </div>
  </el-upload>
</template>
<script lang="ts" setup>
import { ref, withDefaults, defineProps, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { uploadFile2 } from '@/api/common'
import { useRoute } from 'vue-router'
interface Props {
  url?: string
  rule: any
  buttonName: any
  rewardType: any
}
const props = withDefaults(defineProps<Props>(), {
  url: '',
  buttonName: '点击上传',
  rewardType: 1,
  rule: () => {
    return {
      type: 'jpg|JPG|jpeg|JPEG|png|PNG',
      unit: 'MB',
      size: 20
    }
  }
})
const route = useRoute()
const pageType = route.query.type
const status = route.query.status
const emit = defineEmits(['submit'])
const mskVisible = ref(false)
const onShowMsk = () => {
  mskVisible.value = true
}
// 上传图片
const handleChange = (file: any) => {
  const fileName = file.name.split('.')
  if (!props.rule.type.includes(fileName.pop())) {
    ElMessage.error('上传文件类型不正确, 请重新上传!')
    return
  }
  if (props.rule.unit === 'KB') {
    if (file.size / 1024 > props.rule.size) {
      ElMessage.error('图片大小不能超过' + props.rule.size + 'KB')
      return
    }
  }
  if (props.rule.unit === 'MB') {
    if (file.size / 1024 / 1024 > props.rule.size) {
      ElMessage.error('图片大小不能超过' + props.rule.size + 'MB')
      return
    }
  }
  uploadFile2({
    file: file.raw,
    fileName: file.name
  }).then((res: any) => {
    emit('submit', res.url)
  })
}
// 删除图片
const onDelete = () => {

  emit('submit', '')
}
watch(
  () => props.url,
  () => {
    mskVisible.value = false
  }
)

watch(
  () => props.rewardType,
  (v) => {
    // https://static.scrm.keyid.cn/assets/images/lottery/%E7%A4%BC%E7%89%A9%E7%9B%92.png
    // https://static.scrm.keyid.cn/assets/images/lottery/%E4%BD%8D%E5%9B%BE.png
    if (v == 1) {
      emit('submit', 'https://static.scrm.keyid.cn/assets/images/lottery/liwu.png')
    } else {
      emit('submit', 'https://static.scrm.keyid.cn/assets/images/lottery/hongbao.png')
    }
  }
)
</script>
<style lang="scss" scoped>
.btn_box {
  width: 48px;
  height: 48px;
  padding: 5px;
  border-radius: 3px;
  border: 1px dashed #c0ccda;
  background: #fbfdff;
  color: #ff6b00;
  display: grid;
  place-items: center;

  &:hover {
    border: 1px dashed #ff6b00;
  }
}

.image_box {
  max-height: 50px;
  position: relative;

  .image {
    width: 48px;
    height: 48px;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 3px;
    border: 1px solid #c0ccda;
    font-size: 60px;
  }

  .msk_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 3px;
    display: grid;
    place-content: center;
    background-color: rgba(0, 0, 0, 0);
    font-size: 30px;

    .el-icon {
      color: #fff;
      cursor: pointer;

      &:hover {
        color: #f56c6c;
      }
    }

    &:hover {
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
}
</style>
